<template>
    <div class="my-dialog">
      <form class="form" style="padding: 20px 10px;" onsubmit="false">
        <h3>{{isEdit ? '修改用户':'添加用户' }}</h3>
    <div class="dialog-main" style="margin: 20px 10px;">
     <span>用户名</span> <input ref="username" @blur="usernameRules" type="text" v-model="formData.username" :disabled="isEdit">
     <div ref="uerror" class="error-message">请输入正确的内容</div>
    <div class="username" style="margin: 20px 0;" v-if="!isEdit">
     <span>密码</span> <input ref="password" @blur="passwordRules" type="password" v-model="formData.password"/>
     <div ref="perror" class="error-message">请输入正确的内容</div>
    </div>
    <div class="email" style="margin: 20px 0;">
     <span>邮箱</span> <input ref="email" type="text" v-model="formData.email" @blur="emailRules">
     <div ref="eerror" class="error-message">请输入正确的内容</div>
    </div>
    <div class="phone">
     <span>手机</span> <input ref="mobile" @blur="mobileRules" type="text" v-model="formData.mobile">
     <div ref="merror" class="error-message">请输入正确的内容</div>
    </div>
    </div>
    <div class="dialog-buttom">
      <button @click="$emit('close',false);formData = {
          username: '',
          password: '',
          email: '',
          mobile: ''
        }">取消</button>
      <button @click="doHander">确定</button>
    </div>
  </form>
</div>
</template>

<script>
import { addUser, editUser } from '@/api/user'
export default {
  name: 'ShoppingDialog',
  props: {
    row: {
      type: Object,
      default: function () {
        return {
          username: '',
          password: '',
          email: '',
          mobile: ''
        }
      }
    },
    isEdit: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      formData: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      }
    }
  },
  created () {
    // console.log(this.row, '11')
    if (this.isEdit) {
      this.formData = { ...this.row }
    }
  },
  methods: {
    // 提交表单
    async doHander () {
      if (this.isEdit) {
        if (!this.emailRules() || !this.mobileRules()) return
        const res = await editUser(this.formData)
        console.log(res)
      } else {
        if (!this.usernameRules() || !this.passwordRules() || !this.emailRules() || !this.mobileRules()) return
        const res = await addUser(this.formData)
        if (res.meta.status === 201) {
          this.$message.success(res.meta.msg)
        }
      }
      this.$emit('doHander')
    },
    usernameRules () {
      const reg = /^[a-z,1-9]{5,9}$/
      const value = this.$refs.username.value
      if (!reg.test(value)) {
        this.$refs.uerror.style.display = 'block'
        return reg.test(value)
      }
      this.$refs.uerror.style.display = 'none'
      return reg.test(value)
    },
    passwordRules () {
      const reg = /^\d{6,10}$/
      const value = this.$refs.password.value
      if (!reg.test(value)) {
        this.$refs.perror.style.display = 'block'
        return reg.test(value)
      }
      this.$refs.perror.style.display = 'none'
      return reg.test(value)
    },
    emailRules () {
      const reg = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/
      const value = this.$refs.email.value
      if (!reg.test(value)) {
        this.$refs.eerror.style.display = 'block'
        return reg.test(value)
      }
      this.$refs.eerror.style.display = 'none'
      return reg.test(value)
    },
    mobileRules () {
      const reg = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/
      const value = this.$refs.mobile.value
      if (!reg.test(value)) {
        this.$refs.merror.style.display = 'block'
        return reg.test(value)
      }
      this.$refs.merror.style.display = 'none'
      return reg.test(value)
    }
  }
}
</script>

<style lang="less" scoped>
  .my-dialog {
    width: 100vw;
    height: 100vh;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    .form {
      background-color: #fff;
      width: 800px;
      height: 400px;
      margin: 0 auto;
      margin-top: 15vh;
      span {
        padding: 0 20px;
      }
      input {
        width: 80%;
        height: 35px;
        border: 1px solid #CCD0D6;
        border-radius: 5px;
        padding-left: 5px;
      }
    }
  }

  .error-message {
  display: none; /* 初始状态隐藏 */
  color: red;
  font-size: 12px;
  margin-left: 80px;
}
</style>
